import React from 'react'
import { Tabs } from 'antd'
const { TabPane } = Tabs
const MyTab = () => {
  const onChange1 = value => {
    console.log(value)
  }
  const onEdit1 = (targetKey, action) => {
    console.log(targetKey, action)
  }
  return (
    <>
      <div className='box'>
        <div className='box-header'>base</div>
        <div className='box-body'>
          <div className='box-title'>default</div>
          <div className='box-content'>
            <Tabs defaultActiveKey={1} onChange={onChange1}>
              <TabPane key={1} tab="tab1">
                tab1 content
              </TabPane>
              <TabPane key={2} tab="tab2">
                tab2 content
              </TabPane>
              <TabPane key={3} tab="tab3">
                tab3 content
              </TabPane>
            </Tabs>
          </div>
          <div className='box-title'>card</div>
          <div className='box-content'>
            <Tabs defaultActiveKey={1} onChange={onChange1} type='card'>
              <TabPane key={1} tab="tab1">
                tab1 content
              </TabPane>
              <TabPane key={2} tab="tab2">
                tab2 content
              </TabPane>
              <TabPane key={3} tab="tab3">
                tab3 content
              </TabPane>
            </Tabs>
          </div>
          <div className='box-title'>editable</div>
          <div className='box-content'>
            <Tabs defaultActiveKey={1} onChange={onChange1} type='editable-card' onEdit={onEdit1}>
              <TabPane key={1} tab="tab1">
                tab1 content
              </TabPane>
              <TabPane key={2} tab="tab2">
                tab2 content
              </TabPane>
              <TabPane key={3} tab="tab3">
                tab3 content
              </TabPane>
            </Tabs>
          </div>
        </div>
      </div>
    </>
  )
}
export default MyTab